<template>
  <el-dialog v-model="dialogVisible" width="350" modal="false" align-center destroy-on-close
    :before-close="handleClose">
    <template #header="{ close, titleId, titleClass }">
      <div class="diaheder">
        <p>{{ type == 'login' ? "登录" : "注册" }}</p>
      </div>
    </template>
    <div class="bodys">
      <p @click="qiehuan()">{{ type == 'login' ? "没有账号?立即注册>" : "已有账号?立即登录>" }}</p>
      <p>登录用户名</p>
      <el-input v-model="username" placeholder="请输入用户名" />
      <p>登录密码</p>
      <el-input v-model="userpassworld" type="password" placeholder="请输入密码" />
      <p v-if="type == 'rg'">邀请码</p>
      <el-input v-model="regma" v-if="type == 'rg'" placeholder="请输入邀请码" />
    </div>
    <div class="foot">
      <div> <el-checkbox v-if="type == 'login'" v-model="checked1" true-value="1" false-value="0" label="记住登录"
          size="large" />
        <div v-if="type == 'login'"></div>
      </div>
      <!-- 忘记密码 -->
      <div>
        <p @click="loginOrRG">
          <Icons type="icon-yonghu2" style="font-size: 15px;"></Icons>{{ type == 'login' ? "登录" : "注册" }}
        </p>
      </div>

    </div>

  </el-dialog>
</template>

<script setup>
import { ref, reactive, defineExpose } from 'vue'
import { Icons } from 'ikicons'
import { ElButton, ElDialog, ElInput, ElCheckbox, ElMessage } from 'element-plus'
import { login, rgister } from '@/api/request/userxx/requestuser'
const dialogVisible = ref(false)
const resolves = ref(null)
const username = ref('')
const userpassworld = ref('')
const regma = ref('')
const checked1 = ref('0')
const type = ref('login')

const qiehuan = () => {
  username.value = ''
  userpassworld.value
  regma.value = ''
  const checked1 = ref('0')
  if (type.value == 'login') {
    type.value = 'rg'
  } else {
    type.value = 'login'
  }
}
const loginOrRG = async () => {
  try {
    if (username.value == '' || userpassworld == '') {
      ElMessage({
        message: '用户名或密码不能为空',
        type: 'error'
      })
      return
    }
    switch (type.value) {
      case 'login':

        const bank = await login({
          username: username.value,
          userpassworld: userpassworld.value,
          needcreatedcookie: checked1.value
        })
        console.log(bank);

        if (bank.data.stas == "1") {
          resolves.value(bank.data)
          dialogVisible.value = false
        }
        ElMessage({
          message: bank.data.stas == "1" ? '登录成功' : bank.data.error,
          type:bank.data.stas == "1" ? 'success' : 'error',
        })
        break;
      case 'rg':
        if (regma.value == '') {
          ElMessage({
            message: '邀请码不能为空',
            type: 'error'
          })
          return
        }
        const rgbank = await rgister({
          username: username.value,
          userpassworld: userpassworld.value,
          regma: regma.value
        })
        ElMessage({
          message: rgbank.data.stas === "1" ? '注册成功请登录' : rgbank.data.error,
          type: rgbank.data.stas === "1" ? 'success' : 'error',
        })
        if(rgbank.data.stas === "1"){
          type.value = 'login'
        }
        break;
      default:
        break;
    }
  } catch (error) {
    ElMessage({
      message: error,
      type: 'error',
    })
  }
}
const logininit = (types) => {
  type.value = types
  dialogVisible.value = true
  return new Promise((resolve, reject) => {
    resolves.value = resolve
  })
}
const handleClose = (done) => {
  dialogVisible.value = false

}
defineExpose({
  logininit
})
</script>

<style>
.diaheder {
  color: var(--header-color);
}

.diaheder>p:nth-child(1) {
  font-size: 2em;
  position: relative;
  /* 为了定位光效条 */
  display: inline-block;
  /* 确保 p 标签的宽度仅与内容匹配 */
  width: 90%;
}

.diaheder>p:nth-child(1)::after {
  content: '';
  /* 创建一个伪元素 */
  position: absolute;
  bottom: 0px;
  /* 使光效条在文字的下方 */
  left: 0;
  width: 40%;
  /* 初始宽度为0 */
  height: 4px;
  /* 光效条的高度 */
  background: #f04494;
  border-radius: 5px;
  will-change: width;
  /* 提示浏览器优化宽度的过渡动画 */
  /* transition: width 5s ease-out; 动画效果 */
}

@keyframes cssAnimation1 {
  0% {
    width: 40%;
    /* 当 p 标签被 hover 时，光效条的宽度变为 100% */
  }

  50% {
    width: 80%;
    /* 当 p 标签被 hover 时，光效条的宽度变为 100% */
  }

  100% {
    width: 100%;
    /* 当 p 标签被 hover 时，光效条的宽度变为 100% */
  }
}

.diaheder>p:nth-child(1):hover {

  animation: cssAnimation1 1s forwards;
  /* 动画效果 */

}

.el-dialog {
  background-color: var(--header-bg);
  /* 背景颜色，类似品牌色背景 */
  color: var(--header-color);
  border-radius: 10px;

}

.bodys {
  width: 100%;
}

.bodys>p:nth-child(1) {
  cursor: pointer;
  width: 100%;
  font-size: 0.9rem;
  display: flex;
  justify-content: flex-start;
}

.bodys>p:nth-child(1):hover {
  color: #f04494;
}

.bodys>p:nth-child(2) {
  margin-top: 30px;
  font-size: 0.9rem;
  color: var(--muted-color);
}

.el-input__wrapper {
  padding: 0;
  margin-top: 3px;
}

.bodys>p:nth-child(4) {
  margin-top: 10px;
  font-size: 0.9rem;
  color: var(--muted-color);
}

.bodys>p:nth-child(6) {
  margin-top: 10px;
  font-size: 0.9rem;
  color: var(--muted-color);
}

.foot {
  width: 100%;

  margin-top: 5px;
}

.foot>div:nth-child(1) {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.9rem;
}

.foot>div:nth-child(2) {
  width: 100%;
  height: 35px;
  margin-top: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.foot>div>p:nth-child(1) {
  width: 80%;
  height: 100%;
  cursor: pointer;
  border-radius: 15px;
  display: flex;
  justify-content: center;
  background: linear-gradient(135deg, #59c3fb 10%, #268df7 100%);
  align-items: center;
  color: white;
}

.foot>div>p:nth-child(1):hover {
  opacity: 0.8;
}
</style>